let current = 1;
let pageSize = 3;
let x;
var selectedList =[]

// 从本地获取
// var course = loaclGet('courseDetails') || course
// render(course)


// 大图模式切换
$('.xl-big').on('click',function() {
  x=1
  $('.table').css('display','none')
  $('.xl-big-wrap').css('display','block')
  $('.xl-del').css('display','none')
  $('.xl-big').css('display','none')
  $('.xl-list').css('display','block')
  init()
})

// 再切换成列表模式
$('.xl-list').on('click',function() {
  $('.table').css('display','table')
  $('.xl-big-wrap').css('display','none')
  $('.xl-del').css('display','inline-block')
  $('.xl-big').css('display','inline-block')
  $('.xl-list').css('display','none')
  init()
})

// 请求数据库信息
function init(x) {
  $.ajax({
    url:'/courses/get',
    method:'GET',
    data:{
      current,
      pageSize
    }
  })
   .done(function(res) {
     if(x=1) {
      renderBig(res.data)
     }
     render(res.data)
     console.log(res.msg,res.data)
   })
   .fail(function(err) {
     console.log(err)
   })
}
// 动态创建列表
function render(data) {
    $('.xl-course-tbody').text('')

    for (var i = 0; i < data.length; i++) {
        var tr = `
          <tr>
            <td class="xl-selected-wrap" indexid="${data[i].courseNumber}"><input type="checkbox" class="xl-selected"></td>
            <td>${data[i].courseName}</td>
            <td>${data[i].courseProfessor}</td>
            <td>${data[i].courseDuration}</td>
            <td>${data[i].courseCreateTime}</td>
            <td>${data[i].courseProfessor}</td>
            <td>999</td>
            <td>
              <button type="button" class="xl-view-course" indexid="${data[i].courseNumber}">查看</button>
              <button type="button" class="xl-edit-course" indexid="${data[i].courseNumber}">编辑</button>
            </td>
          </tr>
        `;
        $('.xl-course-tbody').append($(tr));
      }
}


// 获取点击的courseNumber

$('.xl-course-tbody').on('click','.xl-selected',function() {
  var that = $(this)
  $.ajax({
    url:'/courses/getbyid',
    method:'GET',
  })
   .done(function(res) {
    let courseNumber = res.data
    if(that.prop('checked')) {
      selectedList.push(Number(that.parent().attr('indexid')))
      console.log(selectedList,'danxuan')
    } else {
      console.log($(this[0]))
      var indexid=selectedList.indexOf(Number(that.parent().attr('indexid')))
      selectedList.splice(indexid,1)
      console.log(selectedList,'quxiao')
    }
    // 取消一个全选取消，所有选上，全选选上
    if(courseNumber.length == selectedList.length) {
      $('.xl-selected-all').prop('checked',true)
    } else {
      $('.xl-selected-all').prop('checked',false)
    }
   })
   .fail(function(err) {
    console.log(err)
  })
})

// 全选处理
$('.xl-selected-all').on('click',function() {
  selectedList =[]
    // 获取所有id
  $.ajax({
    url:'/courses/getbyid',
    method:'GET',
  })
    .done(function(res) {

      let courseNumber = res.data
      console.log(res.data)
      if($('.xl-selected-all').prop('checked')) {
        $('.xl-selected').prop('checked',true)
        for(var i = 0;i<courseNumber.length;i++) {
          selectedList.push(courseNumber[i].courseNumber)
          console.log(selectedList)
        }
      } else {
        $('.xl-selected').prop('checked',false)
        selectedList = []
        console.log(selectedList)
      }
    })
    .fail(function(err) {
      console.log(err)
    })
})

// 删除
$('.xl-del').on('click', function() {
  // 传输数据
  let courseId = selectedList
  if(selectedList.length>0) {
    renderDel()
    cancel()
    concern(courseId)
  } else {
    return
  }
})

// 弹框cancel 被点击
function cancel() {
  $('.xl-final-cancel').on('click',function() {
    $(this).parent().remove()
    $('.xl-selected-all').prop('checked',false)
    $('.xl-selected').prop('checked',false)
  })
}

// // 弹框concern 被点击删除
function concern(courseId) {
  $('.xl-final-concern').on('click', function() {
    $.ajax({
      url:'/courses/del',
      method:'GET',
      data: {
        courseId:courseId
      }
    })
    .done(function(data) {
      init()
      console.log('删除成功')
   })
   .fail(function(err) {
     console.log(err)
   })
    $('.xl-selected-all').prop('checked',false)
    $(this).parent().remove()
  })
}

// 动态创建删除提示
function renderDel() {
  var alerts = `<div class="xl-alert">
                  <p>您确定要删除该课程吗？</p>
                  <button class="xl-final-cancel" type="button">取消</button>
                  <button class="xl-final-concern" type="button">确认</button>
                </div>`
  $('body').append(alerts)
}

// 新增
$('.xl-add').on('click',function() {
  parent.$('.myiframe').prop('src','lxm_pages/add_course.html')
})

// 编辑
$('.xl-course-tbody').on('click','.xl-edit-course',function() {
  var studentId = $(this).attr('indexid')
  parent.$('.myiframe').prop('src','lxm_pages/add_course.html?'+studentId)
})

// 查看
$('.xl-course-tbody').on('click','.xl-view-course',function() {
  var studentId = $(this).attr('indexid')
  parent.$('.myiframe').prop('src','lxm_pages/introduction_course.html?'+studentId)
})


// 大图模式动态创建
function renderBig(data) {
  $('.xl-big-wrap').text('')
  for (var i = 0; i < data.length; i++) {
    var div = `
  <div class="xl-big-wrap-details">
    <img src="../../images/lxm_images/ca120.png" alt="">
    
    <div class="xl-details-text-wrap first clear">
        <p class="xl-text-title">${data[i].courseName}</p>
        <p class="xl-text-content">${data[i].courseCreateTime}</p>
    </div>
     
    <div class="xl-details-text-wrap clear">
      <p class="xl-text-title">开课时间</p>
      <p class="xl-text-content">${data[i].courseStartTime}</p>
    </div>
    <div class="xl-details-text-wrap clear">
      <p class="xl-text-title">课程时长</p>
      <p class="xl-text-content">${data[i].courseDuration}</p>
    </div>
    <div class="xl-details-text-wrap clear">
      <p class="xl-text-title">课程老师</p>
      <p class="xl-text-content">${data[i].courseProfessor}</p>
    </div>
    <div class="xl-details-text-wrap clear">
      <p class="xl-text-title">已读数量</p>
      <p class="xl-text-content">1000</p>
    </div>

    <div class="xl-big-button-wrap">
      <button type="button" class="xl-big-check" indexid="${data[i].courseNumber}">查看详情</button>
      <button type="button" class="xl-big-del" indexid="${data[i].courseNumber}">删除</button>
    </div>
  </div>
    `;
    $('.xl-big-wrap').append($(div));
  }
}
// 大图列表删除
function concernBig(is) {
  $('.xl-final-concern').on('click',function() {
    $(is).parent().parent().remove()
    // 获取课程编码
    var courseNum = $(is).attr('indexid')
    // 删除本地存储
    course = loaclGet('courseDetails')
    course = course.filter(function(item) {
      return item.courseNumber != courseNum
    })
    localSave(course)
    $(this).parent().remove()
  })
}
// 大图模式删除
$('.xl-big-wrap').on('click','.xl-big-del',function() {
  let courseId = $(this).attr('indexid')
  console.log(courseId)
  if(courseId) {
    renderDel()
    cancel()
    concern(courseId)
  } else {
    return
  }
})

// 大图模式查看
$('.xl-big-wrap').on('click','.xl-big-check',function() {
  var studentId = $(this).attr('indexid')
  parent.$('.myiframe').prop('src','lxm_pages/introduction_course.html?'+studentId)
})

// 分页
layui.use('laypage', function () {
  var laypage = layui.laypage;

  $.ajax({
    url: '/courses/total',
    method: 'GET'
  })
    .done(function (res) {
      console.log(res);

      laypage.render({
        elem: 'pagination', //注意，这里的 test1 是 ID，不用加 # 号
        limit: pageSize,
        count: res.data.total,
        jump: function (obj, first) {
          current = obj.curr;

          init();
          //首次不执行
          if (!first) {
            //do something
          }
        }
      });
    })
    .fail(function (err) {
      console.log(err);
    })
});